<template>
    <div class="Person">
        <div class="Person-title">
            <h5>人事备案管理</h5>
        </div>
            <div class="Person-centent" v-show="isShow">
                <div class="row">
                    <!-- <div class="search">
                        <a class="btn" @click="create"><i class="fa fa-plus"></i>新增</a>      
                    </div>     -->
              <!-- fa fa-refresh -->
                        <div class="search">
                            <a class="btn" @click="dialogTableVisible = true"><i class="fa fa-plus"></i>新增</a>      
                        </div>    
                    <div class="tt">
                        
                        <el-table :data="tableData" style="width: 100%">
                              <!-- <el-table-column type="index" label="ID" width="50"></el-table-column> -->
                              <el-table-column property="emplid" label="员工编号" width="100"></el-table-column>
                              <el-table-column property="emplName" label="员工名称" width="100"></el-table-column>
                              <el-table-column property="setid" label="二级公司ID" width="100"></el-table-column>
                              <el-table-column property="company" label="二级公司" width="100"></el-table-column>
                              <el-table-column property="deptid" label="部门ID" width="100"></el-table-column>
                              <el-table-column property="deptName" label="部门名称" width="100"></el-table-column>
                              <!-- <el-table-column property="" label="创建人" width="100"></el-table-column> -->
                              <el-table-column property="createName" label="创建人名称" width="100"></el-table-column>
                              <el-table-column property="createTime" label="创建时间" width="100"></el-table-column>
                              
                              <el-table-column property="" label="操作" width="200">
                                  <template slot-scope="scope">
                                    <!-- <el-tooltip :content="'Switch value: ' + value3" placement="top"> -->
                                    <!-- <el-switch
                                        v-model="value3"
                                        on-color="#18A869"
                                        off-color="#7e9792"
                                        on-text="启用"
                                        off-text="禁用"
                                        >
                                    </el-switch> -->
                                    </el-tooltip>
                                    <!-- <span class="opt-btn-sp"><a @click.stop="salaryDetail2(scope.row)"><i></i>编辑</a></span>                                       -->
                                    <span class="delete" @click="deleteData(scope.row)"><a> 删除 </a></span>                                      
                                    <!-- <span class="opt-btn-sp"><a @click.stop="salaryDetail2(scope.row)"><i></i>启用</a></span>                                       -->
                                  </template>
                              </el-table-column>
                        </el-table>
                                <el-dialog title="新增人事备案" :visible.sync="dialogTableVisible">
                                    <el-input
                  v-model='searchValue'
                  placeholder="请输入8位员工编号或姓名查询"
                  style='width:400px'>
                 </el-input>
                 <el-button class="search-button" @click='search'>搜索</el-button>
                                <el-table :data="gridData">
                                    <el-table-column property="emplid" label="员工编号" width="100"></el-table-column>
                                    <el-table-column property="name" label="员工名称" width="100"></el-table-column>
                                    <el-table-column property="setid" label="二级公司ID" width="100"></el-table-column>
                                    <el-table-column property="deptid" label="部门ID" width="100"></el-table-column>
                                    <el-table-column property="dept_descr" label="部门名称"></el-table-column>
                                </el-table>
                                <span slot="footer" class="dialog-footer">
                                            <el-button type="primary" @click="save">添加</el-button>
                                            <el-button @click="dialogTableVisible=false">取消</el-button>
                                </span>
                                </el-dialog>
                    </div>       
                </div>
            </div>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import { CheckboxGroup, Checkbox ,Switch,} from "element-ui";
Vue.use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(Switch);

import cardLeader from "@/components/card-leader";
import searchBox from "@/components/search-box";
export default {
  data() {
    return {
      
      dialogName:'',
      dialogTableVisible: false,
      isShow: true,
      tableData: [], //渲染页面
      checkList: [],
      // currentRow: null
      gridData: [],
      searchValue:null,
      searchValue1:null,
      title: "",
      id: null,
    };
  },
  mounted: function() {
    this.salaryDetail();
  },
  methods: {
    salaryDetail: function() {
      let self = this;
      this.Axios
        .Post(this.URL.getHrlist.url,'')
        .then(function(res) {
          self.tableData = res.data.datas;
        });
      //  this.dialogTableVisible = true;
    },
    search: function() {      
      let self = this;
      let params = {
          emplid:this.searchValue
      };
      this.Axios
        .Post(this.URL.getUserById.url,params)
        .then(function(res) {
          self.gridData = res.data.datas;
        });
      //  this.dialogTableVisible = true;
    },
    save() {
      let params = {
        emplid: this.gridData[0].emplid,
        name:this.gridData[0].name,
        setid:this.gridData[0].setid,
        deptid:this.gridData[0].deptid,
        dept_descr:this.gridData[0].dept_descr
        // position: this.checkList
      };
      this.Axios.Post(this.URL.addHr.url, params).then(res => {
          self.gridData = res.data.datas;
          this.salaryDetail();
      });
        this.dialogTableVisible = false;
    },
    deleteData(row){
      let params = {
        emplid:row.emplid,
      };
       this.Axios.Post(this.URL.deleteHrInfo.url, params).then(res => {
          self.gridData = res.data.datas;
      });
      this.salaryDetail();
    }

  },
  props: {
    personInfo:{
        type:String,
        default:''
    },
  },

  beforeDestroy: function() {
    window.getFlowProcessFrom = null;
    window.getFlowProcessApplyFrom = null;
    window.getFlowProcessApprovedFrom = null;
  },
  components: {
    cardLeader,
    searchBox
  }
};
</script>

<style scoped>
.checkbox-group div {
  margin-bottom: 10px;
}
.nodata{
  display:block;
  text-align: center;
  
}
.Person-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.Person-centent {
  padding: 0px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.Person .row {
  margin-right: -10px;
  margin-left: -10px;
}
.row .search {
  width: 100%;
  margin-top: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn{
    
    width:70px;
    height:34px;
    line-height:34px;
    text-align:center;
    color:#fff;
    display:inline-block;
    background-color:#18a689;
    border-radius:5px;
}
.row .search .btn:first-child{
    margin-left:20px;
}

.row .search .btn:hover{
  background-color:#ccc;
  color:#000;
  cursor:pointer;
}
.row .search .wi {
  width: 33.3333333%;
}
.el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}
.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
 .delete > a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin: 10px 0;
  }
  .row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn{
    
    width:70px;
    height:34px;
    line-height:34px;
    text-align:center;
    color:#fff;
    display:inline-block;
    background-color:#18a689;
    border-radius:5px;
}
/* .el-button .r{
  width:66.66666667%;
} */
/* .el-input-group__append .el-button{
  background:#1AB394;
  color:#fff;
} */
/*table*/
/* .el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
} */
.row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn{
    
    width:70px;
    height:34px;
    line-height:34px;
    text-align:center;
    color:#fff;
    display:inline-block;
    background-color:#18a689;
    border-radius:5px;
}
.row .search .btn:first-child{
    margin-left:20px;
}

.row .search .btn:hover{
  background-color:#ccc;
  color:#000;
  cursor:pointer;
}
.row .search .wi {
  width: 33.3333333%;
}
.el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}
/* .btn-sp{
    padding-left: -10px;
} */
/* .btn-sp>a{
    border:1px solid #23c6c8;
    background: #23c6c8;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
    
} */
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  /* margin-top:5px; */
}
/* .delete>a{
     border:1px solid #ec4758;
    background: #ec4758;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
} */
.el-pagination {
  margin-top: 20px;
}
</style>
<style>
/*修改element-ui样式*/
/* .el-button.is-disabled.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
    color:#fff;
    background:#7e9792;
    border:1px solid #7e9792;
    padding:8px 10px;
    font-size:13px;
} */
.Person .el-radio-button__inner:hover {
  color: #333;
}
.Person .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.Person .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.Person .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.Person .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.Person .el-input-group--append .el-input__inner,
.Person .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}
/* .el-input-group__append .el-button[data-v-4fefba28]{
      border:1px solid #1AB394;
      border-radius:0px 3px 3px 0px;
      line-height:0.99;
} */
/*table*/
.Person .el-table {
  border: none !important;
}
.Person .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.Person .el-table__footer-wrapper thead div,
.Person .el-table__header-wrapper thead div {
  background: #fff !important;
}
.Person .el-table .cell {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.Person .el-table__body-wrapper {
  overflow: hidden !important;
}
/* .el-table .cell, .el-table th>div{
    padding-left: 5px ! important;
    padding-right: 5px ! important;
} */
/* .Person-tools dh{
    background:red;
   display:inline-block;
} */
.Person .el-table::after {
  height: 0 !important;
}
.Person .el-table__header-wrapper .el-table__header{
	width:100% !important;
}

.Person .el-table__body-wrapper>table{
	width:100% !important;
}
</style>
